<script>
import {doDelete, doGet} from "../http/httpRequest.js";
import {messageConfirm, messageTip} from "../util/util.js";

export default {
  name: "ActivityView",

  inject: ['reload'],

  data() {
    return {
      //市场活动搜索表单对象,初始值为空
      activityQuery: {},
      //市场活动列表对象，初始值为空
      activityList: [{}],
      //每页显示多少条数据
      pageSize: 0,
      //总共查询多少数据
      total: 0,
      //负责人的下拉列表
      ownerOptions: [{}],
      //定义市场活动搜索表单验证规则
      activityRules: {
        cost: [
          {pattern: /^-?(0|([1-9][0-9]*))(\.[\d]{1,2})?$/, message: "活动预算必须是整数或者是两位小数", trigger: "blur"}
        ],
      },
      //市场活动id数组
      activityIdArray: [],
    }
  },

  methods: {
    //查询市场活动列表数据
    getData(current) {
      let startTime = '';
      let endTime = '';

      for (let key in this.activityQuery.activityTime) {
        console.log(this.activityQuery.activityTime[key])

        if (key === '0') {
          startTime = this.activityQuery.activityTime[key];
        }
        if (key === '1') {
          endTime = this.activityQuery.activityTime[key];
        }
      }


      doGet("/api/activities", {
        current: current, //当前页
        //6个搜索条件
        ownerId: this.activityQuery.ownerId,
        name: this.activityQuery.name,
        startTime: startTime,
        endTime: endTime,
        cost: this.activityQuery.cost,
        createTime: this.activityQuery.createTime
      }).then(resp => {
        if (resp.data.code == 200) {
          this.activityList = resp.data.data.list;
          this.total = resp.data.data.total;
          this.pageSize = resp.data.data.pageSize;
        }
      })
    },

    //分页函数
    toPage(current) {
      this.getData(current);
    },

    //加载负责人
    loadOwner() {
      doGet("/api/owner", {}).then(resp => {
        if (resp.data.code == 200) {
          this.ownerOptions = resp.data.data;
        }
      })
    },

    //搜索
    onSearch() {
      this.getData(1)
    },

    //录入市场活动
    add() {
      this.$router.push("/dashboard/activity/add")
    },

    //搜索条件重置按钮
    onReset() {
      this.activityQuery = {};
      this.onSearch(1);
    },

    //编辑市场活动
    edit(id) {
      this.$router.push("/dashboard/activity/edit/" + id)
    },

    //查看市场活动详情
    view(id) {
      this.$router.push("/dashboard/activity/" + id);
    },

    //删除市场活动
    del(id) {
      messageConfirm("确定要删除吗?").then(() => {
        doDelete("/api/activity/" + id, {}).then(resp => {
          if (resp.data.code == 200) {
            messageTip("删除市场活动成功", "success")
            //实现页面刷新
            this.reload();
          } else {
            messageTip("删除市场活动失败，原因: " + resp.data.msg, "error")
          }
        })
      }).catch(() => {
        messageTip("取消删除市场活动", "warning")
      })
    },

    //勾选复选框触发函数
    handleSelectionChange(selectionDataArray) {
      console.log(selectionDataArray);
      this.activityIdArray = []
      selectionDataArray.forEach(data => {
        let activityId = data.id
        this.activityIdArray.push(activityId);
      })
    },

    //批量删除市场活动
    batchDel() {
      if (this.activityIdArray.length <= 0) {
        messageTip("请选择要删除的数据", "warning")
        return;
      }
      messageConfirm("确定要删除这些数据吗?").then(() => {
        //数组变为字符串
        let ids = this.activityIdArray.join(",")
        doDelete("/api/activity", {
          ids: ids
        }).then(resp => {
          if (resp.data.code == 200) {
            messageTip("批量删除市场活动成功", "success")
            //实现页面刷新
            this.reload();
          } else {
            messageTip("批量删除市场活动失败，原因: " + resp.data.msg, "error")
          }
        })
      }).catch(() => {
        messageTip("取消批量删除市场活动", "warning")
      })
    }
  },

  mounted() {
    this.getData(1);
  },
}
</script>

<template>
  <el-form :inline="true" :model="activityQuery" :rules="activityRules">

    <!--负责人-->
    <el-form-item label="负责人">
      <el-select v-model="activityQuery.ownerId" placeholder="请选择负责人" clearable fit-input-width: true
                 @click="loadOwner()">
        <el-option v-for="item in ownerOptions" :key="item.id" :label="item.name" :value="item.id"/>
      </el-select>
    </el-form-item>

    <!--活动名称-->
    <el-form-item label="活动名称">
      <el-input v-model="activityQuery.name" placeholder="请输入活动名称" clearable/>
    </el-form-item>

    <!--活动时间-->
    <el-form-item label="活动时间">
      <el-date-picker v-model="activityQuery.activityTime" type="datetimerange" start-placeholder="开始时间"
                      end-placeholder="结束时间" value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <!--活动预算-->
    <el-form-item label="活动预算" prop="cost">
      <el-input v-model="activityQuery.cost" placeholder="请输入活动预算" clearable/>
    </el-form-item>

    <!--创建时间-->
    <el-form-item label="创建时间">
      <el-date-picker v-model="activityQuery.createTime" type="date" placeholder="请选择创建时间" :size="size"
                      value-format="YYYY-MM-DD HH:mm:ss"/>
    </el-form-item>

    <!--搜索和重置按钮-->
    <el-form-item>
      <el-button type="primary" @click="onSearch()">搜 索</el-button>
      <el-button type="primary" plain @click="onReset()">重 置</el-button>
    </el-form-item>
  </el-form>

  <!--数据页面-->
  <el-button type="primary" @click="add()">录入市场活动</el-button>
  <el-button type="danger" @click="batchDel()">批量删除</el-button>

  <!--用户数据展示-->
  <el-table :data="activityList" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55"/>
    <el-table-column type="index" label="序号" width="60"/>
    <el-table-column property="ownerDo.name" label="负责人"/>
    <el-table-column property="name" label="活动名称" show-overflow-tooltip/>
    <el-table-column property="startTime" label="开始时间" show-overflow-tooltip/>
    <el-table-column property="endTime" label="结束时间" show-overflow-tooltip/>
    <el-table-column property="cost" label="活动预算" show-overflow-tooltip/>
    <el-table-column property="createTime" label="创建时间" show-overflow-tooltip/>
    <el-table-column label="操作" width="240">
      <template #default="scope">
        <el-button type="primary" @click="view(scope.row.id)">详情</el-button>
        <el-button type="success" @click="edit(scope.row.id)">编辑</el-button>
        <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
      </template>


    </el-table-column>
  </el-table>

  <!--导航分页-->
  <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" @prev-click="toPage"
                 @next-click="toPage" @current-change="toPage"/>


</template>

<style scoped>
.el-select {
  width: 196.4px;
}

.el-pagination {
  margin-top: 12px;
}

.el-form {
  margin-bottom: 20px;
}
</style>